<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			li {
				list-style: none;
			}
			
			#main {
				width: 600px;
				height: 300px;
			}
			
			#tab-menu {
				width: 600px;
				height: 50px;
				margin: 0;
			}
			
			#tab-menu>ul {
				width: 600px;
				height: 50px;
				padding: 0;
			}
			
			#tab-menu>ul>li {
				border: 0;
				display: inline-block;
				padding: 0;
				height: 50px;
				line-height: 50px;
				background-color: #FF9933;
				color: #fff;
				width: 200px;
				text-align: center;
				margin: 0 -10px 0 0;
			}
			
			.on {
				background-color: #FF6600 !important;
			}
			
			#tab-content>div {
				width: 598px;
				height: 550px;
				border: 1px solid #DDDDDD;
				margin: 0;
				padding: 0;
			}
			
			.show {
				display: block;
			}
			
			.hide {
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="main">
			<div id="tab-menu">
				<ul>
					<li class="tab on">选项卡1切换</li>
					<li class="tab">选项卡2切换</li>
					<li class="tab">选项卡3切换</li>
				</ul>
			</div>
			<div id="tab-content">
				<div class="content show">
					我是选项卡1切换</br>
					我是选项卡1切换</br>
					我是选项卡1切换</br>
					我是选项卡1切换</br>
				</div>
				<div class="content hide">
					我是选项卡2切换</br>
					我是选项卡2切换</br>
					我是选项卡2切换</br>
					我是选项卡2切换</br>
				</div>
				<div class="content hide">
					我是选项卡3切换</br>
					我是选项卡3切换</br>
					我是选项卡3切换</br>
					我是选项卡3切换</br>
				</div>
			</div>
		</div>
		<script>
			{
				class Tab{
					constructor(tab,content){
						/*this.tab = document.getElementsByClassName('tab');
						this.content = document.getElementsByClassName('content');*/
						this.tab = document.getElementsByClassName(tab);
						this.content = document.getElementsByClassName(content);
						this.init();
					}
					init(){
						//let _index = this.index;
						for (let i=0;i<this.tab.length;i++) {
							/*this.liContent[i].onclick = function(){
							  this.hide();
							  this.show(i);
							}.bind(this);*/
							this.tab[i].addEventListener('click',()=>{
								this.hide();
				 				this.show(i);
							})
						}
					}
					show(index){
						this.tab[index].classList.add('on');
						this.content[index].classList.remove('hide');
						this.content[index].classList.add('show');
					}
					hide(){
						for(let i=0;i<this.tab.length;i++){
							this.tab[i].classList.remove('on');
							this.content[i].classList.remove('show');
							this.content[i].classList.add('hide');
						}
					}
				}
				new Tab('tab','content');
			}
		</script>
	</body>
</html>